* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --primary-color: #f36b35;
  --colors-orange-2: #f36933;
  --secondary-color: #b5b4b2;
  --background-color: #f8f7f5;
  --yuit-blue: #42B7CA;
  --yuit-red: #D03B1F;
  --text-color: #1b1917;
  --hover-color: rgb(0, 0, 0);
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {/*背景画像差し込み*/
  font-weight: 700;
  line-height: normal;
  color: var(--text-color);
  background-image: url('../img/4609522_l.jpg');
  background-size: cover;         /* 画面にぴったり表示 */
  background-position: center;    /* 中央に表示 */
  background-repeat: no-repeat;
  font-family: Noto Sans CJK JP;
}
#header{
  background-color: rgb(240, 240, 240);
}
img {
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: auto;
  display: block;
  margin: 0 auto;
  padding: 0;
  border: 0;
}
a[target="_blank"]:not(.remove_svg):after {
  content: url(/Vector.svg);
  display: inline-block;
  background-size: contain;
  vertical-align: bottom;
  margin-left: 0.25rem;
}

/* 追加 */
.js-area h1 > div {
  overflow: hidden;
  display: grid;
}

.text-container {
  background-color: rgba(255, 255, 255, 0.6); /* 白の半透明 */
  padding: 20px; /* 内側の余白 */
  border-radius: 8px; /* 角を丸くする */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

.section-subtitle.astro-CWIR7EX2 {
  color: #D03B1F; /* 赤色に設定 */
}

.section-subtitle.astro-CWIR7EX2 {
  color: #42B7CA; /* 新しい色 (例: 青色) */
}

.text-shadow-white {
  text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.8); /* 白いシャドウ */
}

.text-outline-black {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0px -1px 0 #000,
     0px  1px 0 #000,
    -1px  0px 0 #000,
     1px  0px 0 #000;
}